<template>
  <div>
    <div class="detail-header">
      {{projectDetail.name}}
    </div>
    <div class="detail">
      <el-row :gutter="20">
        <!-- 左边栏 -->
        <el-col :span="6">
          <div class="grid-content">
            <collapse-wrap title="基本信息">
              <div class="s-detail">
                <ul>
                  <li><i class="header-icon el-icon-star-on"></i>项目名称</li>
                  <li><span>{{projectDetail.name}}</span></li>
                  <li><i class="header-icon el-icon-s-home"></i>所属行政区</li>
                  <li><span>{{projectDetail.area}}</span></li>
                  <li><i class="header-icon el-icon-place"></i>位置信息</li>
                  <li v-if="projectDetail.position"><span>{{projectDetail.position}}</span></li>
                  <li><i class="header-icon el-icon-date"></i>项目起始时间</li>
                  <li v-if="projectDetail.startTime"><span>{{projectDetail.startTime|formatTimer()}}</span></li>
                  <li><i class="header-icon el-icon-date"></i>项目终止时间</li>
                  <li v-if="projectDetail.endTime"><span>{{projectDetail.endTime|formatTimer()}}</span></li>
                  <li><i class="header-icon el-icon-star-off"></i>管养单位</li>
                  <li v-if="projectDetail.deptTreeName"><span>{{projectDetail.deptTreeName}}</span></li>
                  <li><i class="header-icon el-icon-star-on"></i>监测单位</li>
                  <li><span>{{projectDetail.implTreeName}}</span></li>
                  <li><i class="header-icon el-icon-s-home"></i>所属行业</li>
                  <li><span>{{projectDetail.industryName}}</span></li>
                  <li><i class="header-icon el-icon-set-up"></i>工程阶段</li>
                  <li><span>{{projectDetail.stageName}}</span></li>
                  <li><i class="header-icon el-icon-s-finance"></i>工程类型</li>
                  <li><span>{{projectDetail.industryName}}</span></li>
                  <li><i class="header-icon el-icon-star-off"></i>工点数</li>
                  <li><span>{{projectDetail.workPointNum}}</span></li>
                  <li><i class="header-icon el-icon-view"></i>监测点数</li>
                  <li><span>{{projectDetail.monitorPointNum}}</span></li>
                </ul>
              </div>
            </collapse-wrap>
          </div>
        </el-col>
        <!-- 右边栏 -->
        <el-col :span="18">
          <div class="grid-content">
            <collapse-wrap title="项目概况">
              <div style="background-color: rgb(231 231 231)">{{projectDetail.survey}}</div>
            </collapse-wrap>
            <collapse-wrap title="项目图片">
              <div class="demo-image__preview">
                <el-image v-for="(item,index) in imgUrls" :key="index" @click="_previewImg(index,imgUrls)" style="width: 100px; height: 100px;margin-right: 15px;"
                  :src="item" >
                </el-image>
              </div>
            </collapse-wrap>
            <collapse-wrap title="项目文件">
              <div>
               <p v-for="(item,index) in fileList" :key="index"><a :download="item.name" :href="item.url">{{item.name}}</a></p>
              </div>
            </collapse-wrap>
          </div>
        </el-col>
      </el-row>
    </div>
<!-- 查看大图 -->
    <picture-viewer ref="imageViewer"></picture-viewer>
  </div>
</template>
<script>
import CollapseWrap from '@/components/collapse-wrap'
import Format from '@/utils/format'
import constUrl from '@/services/env'
import PictureViewer from '@/components/picture-viewer'
import {
  store,
} from './work-point.store'
export default {
  data () {
    return {
    }
  },
  components: {
    CollapseWrap,
    PictureViewer
  },
  filters: {
    // 时间格式化
    formatTimer (timer) {
      return Format(new Date(timer))
    },
  },
  computed: {
    projectDetail () {
      return store.projectInfo
    },
    imgUrls(){
      return store.projectInfo.projectInfoImgList?.map(x => constUrl + x)
    },
    fileList(){
      return store.projectInfo.projectApprovalList?.map(x => {
        return {
          url: constUrl + x.url,
          name: x.name
        }
      })
    },
  },
  watch: {
  },
  methods: {
    // 查看大图
    _previewImg (index, urls) {
      // 显示照片查看器
      this.$refs.imageViewer.showViewer(urls, index)
    },
  },
  created () {
  },
  mounted () {

  }
}
</script>

<style scoped="scoped" lang="less">
  .el-row {
    margin-bottom: 20px;
    color: #606266 !important;
    line-height: 20px;

    /deep/.title {
      padding: 20px;
    }

    /deep/.content {
      padding: 20px !important;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }

  .detail i {
    margin-right: 8px;
  }

  .s-detail ul li {
    padding: 7px;
    border-bottom: 1px solid #ebeef5;
    font-weight: bold;
    color:#04a7b3
  }

  .s-detail ul li span {
    font-weight: normal;
    color:black;
  }

  /deep/.el-upload-list__item-status-label {
    display: none !important;
  }
</style>
